<template>
  <view class="change">
    <!-- 标题栏 start -->
    <fu-custom :isBack="true" bgColor="bg-white" :isBottom="true">
      <block slot="content">{{ i18n['我要反馈'] }}</block>
    </fu-custom>
    <!-- 反馈类型 start -->
    <view class="bg-white padding">
      <view class="flex align-center justify-between">
        <view class="text-333 fu-fs32 text-bold">{{ i18n['反馈类型'] }}</view>
      </view>
      <view class="flex align-center flex-wrap">
        <view class="margin-top margin-right text-cut padding-lr-16 padding-tb-12 type-btn" v-for="(item, index) in types" :key="index"
          :class="item.id == type ? 'active-type' : ' text-999'" @click="reason(item.id)">
          {{ item.title }}
        </view>
      </view>
    </view>
    <!-- 反馈类型 end -->
    <!-- 反馈内容 start -->
    <view class="bg-white padding margin-top-sm">
      <view class="text-333 fu-fs32 text-bold">{{ i18n['反馈内容'] }}</view>
      <view class="padding-24 margin-top-24" style="background: #F6F6F6;border-radius: 16rpx;">
        <textarea class="text-333 height-200 w100" name="body" placeholder-class="text-bf fu-fs28" v-model="body" maxlength="200" placeholder="问题描述的越详细.有助于我们更快的解决问题"/>
        <view class="text-bf margin-top-sm text-right">{{body.length}}/200</view>
      </view>
      <view class="grid col-4 grid-square flex-sub margin-top-32">
        <view class="" v-for="(item, index) in imgList" :key="index" @tap="viewImage(index)" :data-url="index">
          <view class="fu-block-164">
            <fu-image :src="item.path" mode="aspectFill"></fu-image> 
          </view>
          <view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index"><text class="cuIcon-close"></text></view>
        </view>
        <view class="" @tap="chooseImage" v-if="imgList.length < 6">
          <!-- <text class="cuIcon-cameraadd"></text> -->
          <image :src="imgBaseUrl + 'add-img.png'" mode="" class="fu-block-160"></image>
        </view>
      </view>
      <view class="fu-fs24 text-999">{{ i18n['请上传应用截图，最多上传'] }}{{ count }}{{ i18n['张'] }}</view>
    </view>
    <!-- 反馈内容 end -->
    <!-- 联系方式 - 手机号码 start -->
   <!-- <view class="bg-white padding margin-top-sm">
      <view class="text-333 fu-fs32 text-bold">{{ i18n['请留下您的联系方式'] }}</view>
      <view class="flex margin-top">
        <input class="text-333 fu-fs28" name="contact" placeholder-class="text-999" v-model="contact" :placeholder="i18n['手机号/邮箱/QQ号']"/>
      </view>
    </view> -->
    <!-- 联系方式 - 手机号码 end -->
	<view class="bottom">
		<view class="btn-wrap">
			<view class="jilu" @click="handleJump" data-url="/pages/index/setting/my-feedback/index">反馈记录</view>
			<view class="margin-top-32 margin-lr bg-theme text-center height-88 line-height-88 fu-fs32 text-white round" @tap="formSubmit">提交反馈</view>
		</view>
	</view>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  // 引入规则校验文件
  import {
    validate
  } from '@/common/utils/index';
  // import { UploadImg } from '@/common/utils/upload-image.js'
  // 引入上传图片公共方法
  import {
    UploadImage
  } from '@/common/utils/index';
  // 引入上传公共url
  import { utf16toEntities } from '@/common/utils/utils';
  import {
    UPLOAD_IMAGE_URL
  } from '@/common/config.js';
  export default {
    data() {
      return {
        // 是否必填信息 默认初始值必填
        types: [], // 反馈类型 调用接口获取
        type: 1, // 反馈类型选中  默认选中第一个
        imgList: [], // 上传图片数组
        count: 6, //做多上传几张图片
        body: '', //反馈内容
        contact: '', // 手机号码
		isCheck: false
      };
    },
    onLoad() {
      // 获取反馈类型数据
      this.get_feedback_type();
    },

    methods: {
      /**
       * @description 选择反馈类型
       * @param {Object} type反馈类型id
       */
      reason(type) {
        this.type = type;
      },
      /**
       * @description 获取反馈类型数据
       */
      get_feedback_type() {
        let that = this;
        this.$api
          .post(global.apiUrls.feedbackTypes)
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              let result = res.data.data;
              that.types = result.types; //获取反馈类型数据
              that.type = result.types[0] && result.types[0].id; //默认选中第一个反馈类型
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      /**
       * @description 图片上传
       */
      chooseImage() {
        let self = this;
        console.log('可以选择的图片数量', self.count - self.imgList.length);
        // 从相册中选择图片
        uni.chooseImage({
          count: self.count - self.imgList.length, // 默认3
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          success: function(res) {
            const tempFilePaths = res.tempFilePaths;
            // 开始上传
            new UploadImage(tempFilePaths, {
              complete: function(res) {
                // 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
                self.imgList.push(...res);
              }
            });
          }
        });
      },
      /**
       * @description 图片预览
       * @param {Object} inx图片预览数据
       */
      viewImage(inx) {
        let arr = this.imgList.map(item => {
          return item.path;
        });
        uni.previewImage({
          urls: arr,
          current: inx
        });
      },
      /**
       * @description 删除图片事件
       * @param {Object} e事件参数
       * e.currentTarget.dataset.index需要删除的图片下标
       */
      delImg(e) {
        this.$util.showModal({
          title: this.i18n['友情提示'],
          content: this.i18n['确定要删除图片吗？'],
          cancelText: this.i18n['取消'],
          confirmText: this.i18n['确定'],
          success: res => {
            if (res.confirm) {
              // 确定删除从数组中删除图片
              this.imgList.splice(e.currentTarget.dataset.index, 1);
            }
          }
        });
      },
      /**
       * @description 反馈提交
       */
      formSubmit() {
		  if (this.isCheck) return;
        // 对表单数据进行校验
        if (!validate(this.body, 'require')) {
          return this.$message.info(this.i18n['反馈内容不能为空']);
        }
        // if (!validate(this.contact, 'require')) {
        //   return this.$message.info(this.i18n['请留下您的联系方式']);
        // }
        // var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g")
        // if (reg.test(this.contact)) {
        //   return this.$message.info(this.i18n['联系方式中不能包含中文'])
        // }
        let formData = {
          type: this.type,
          body: utf16toEntities(this.body),
          contact: this.contact,
        }
        // 对图片进行处理操作
        let imgarr = this.imgList.map(item => {
          return item.id;
        });
        formData.thumb = imgarr.join(',');
        this.isCheck = true
        // 提交数据
        this.$util.throttle(() => {
          this.$api.post(global.apiUrls.feedbackAdd, formData).then(res => {
            this.$message.info(res.data.msg);
            if (res.data.code == 1) {
              // 提交成功返回上页面
              setTimeout(() => {
                uni.navigateBack();
              }, 800);
            }
			setTimeout(() => {
				this.isCheck = false
			})
          }).catch(() => {
			  this.isCheck = false
		  });
        }, 2000, true)
      },
    }
  };
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.change {
		min-height: 100vh;
		background-color: #fff;
	}
.type-btn {
	border: 1rpx solid #BFBFBF;
	border-radius: 40rpx;
}
.active-type {
	background: rgba(235,106,57,0.12);
	color: #FF6F27;
	border: 1rpx solid #FF6F27;
}
.bottom {
	height: 208rpx;
}
.btn-wrap {
	width: 100%;
	position: fixed;
	bottom: 48rpx;
	font-weight: 500;
	.jilu {
		text-align: center;
		font-size: 32rpx;
		color: #59A6F4;
	}
}
</style>
